<!DOCTYPE html>
<!-- rec2020 blue, progressively reduced in OKLCh Chroma to a neutral grey -->
<!-- D50 LCH 25.454, 146.572, 300.532 -->
<!-- D65 OKLCh color(oklch 0.423449 0.382898 245.0783) -->
<!-- soo decrement 0.382898 / 146.572 = 0.0026123543378 -->
<textarea id="textarea" style="width: 95%; min-height: 10em;"></textarea>
<object data id="preview"></object>
<!-- <script src="color.js" type="module"></script> -->
<script type="module">
import Color from "https://colorjs.io/color.js";
const scale = 146.572/0.423449; // LCH chroma to OKLCh chroma scaling factor
let rects = [];
let reds = [];
let greens = [];
let blues = [];
let fill;
let color = new Color("color(rec2020 0 0 1)");
let start = color.oklch.chroma;

for (let i = start * scale; i > -1; i--) {
    color.oklch.chroma = i/scale;
    console.log(i, color.to("srgb").coords);
    if (color.inGamut("srgb")) {
        fill = color.to("srgb");
    } else {
        fill = "salmon";
    }
    rects.push(`<rect width="1.1" height="10" x="${i}" fill="${fill}" />`);
    let ug = Color.spaces.rec2020.toLinear(color.coords);
    reds.push(`${i},${50 - (ug[0]*35)}`);
    greens.push(`${i},${50 - (ug[1]*35)}`);
    blues.push(`${i},${50 - (ug[2]*35)}`);
}
let markup = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 180 90">
    <desc>Show a gradient from rec2020 blue,
in OKLCh,
as Chroma is reduced from the max value (0.4234) to near-zero
demonstrating less purpling mid-way, compared to CIE LCH
</desc>
${rects.join("\n")}
<rect width="${start * scale}" height="35" y="15" fill="none" stroke="grey" stroke-width="0.2"/>
<polyline fill="none" stroke-width="0.2" stroke="red" points="${reds.join(" ")}" />
<polyline fill="none" stroke-width="0.2" stroke="green" points="${greens.join(" ")}" />
<polyline fill="none" stroke-width="0.2" stroke="blue" points="${blues.join(" ")}" />
</svg>`;
textarea.value = markup;
preview.data = `data:image/svg+xml,${encodeURIComponent(markup)}`;
</script>